import { Component } from 'react';
import Logo from '../../components/common/logo/Logo';//百度logo
import Search from '../../components/baidu/Search';//搜索区域
import HotList from '../../components/baidu/HotList';//热门列表
class Baidu extends Component {
  state={
    list:[
      {
        id:1,
        name:'一组海报带你看活力中国',
      },
      {
        id:2,
        name:'胡鑫宇家属:遗体在学校后山粮库找到',
      },
      {
        id:3,
        name:'专家称年轻时不应为钱去选择工作',
      },
    ],
    list2:[
      {
        id:4,
        name:'多重部署为消费复苏添信心',
      },
      {
        id:5,
        name:'媒体：胡鑫宇录音笔解析今日出结果',
      },
      {
        id:6,
        name:'约翰逊：普京曾威胁用导弹杀了我',
      },
    ]
  }

  // 查询
  search =(e) =>{
    console.log(e);//子组件传来的数据
    // includes方法是用于检查特定元素是包含在数组还是字符串中的方法，它主要用于确认数组或字符串中元素的存在
   this.state.list=this.state.list.filter(item=>item.name.includes(e))
   this.state.list2=this.state.list2.filter(item=>item.name.includes(e))
   this.setState({
    list:this.state.list,
    list2:this.state.list2
   })
  }
  render() { 
    return (
      <div className='baidu'>
        {/* 百度logo */}
        <Logo/>
        {/* 搜索区域 */}
        <Search search={this.search}/>
        {/* 热门列表 */}
        <HotList list={this.state.list} list2={this.state.list2}/>
      </div>
    );
  }
}
 
export default Baidu;